<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>
<body>
<div id="app1" v-cloak><!-- v-cloak用于渲染完成前的隐藏 {{}} 字段 -->
  <h1>{{message1}}</h1>
</div>
<div id="app">
  <h1>{{message + one}} {{one}}</h1>
  <p>{{message + ' ' + one}}</p>
  <p v-once>{{message}} "v-once"</p><!-- v-once 至该变一次 -->
  <p>{{num * 2}}</p>
  <p v-html="url"></p>
  <p v-text="vText"></p>
  <p v-pre>{{message}}</p><!-- v-pre原封不动的显示 -->
  <ul>
    <li v-for="item in movies">{{item}}</li>
  </ul>
  <p>当前计数: {{counter}}</p>
  <!--    <button v-on:click="counter++">+</button>-->
  <!--    <button v-on:click="counter&#45;&#45;">-</button>-->
  <button @click="add">+</button>
  <button @click="sub">-</button>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
  var app = new Vue({
    el: "#app", // 用于挂载管理的元素
    data: { // 定义数据
      message: "消息",
      one: "一二三",
      movies: ["一", "二", "三"],
      counter: 0,
      num: 100,
      vText: "sdklkfdnm",
      url: "<a href='https://www.baidu.com/' target='_blank'>百度一下</a>"
    },
    methods: {
      add: function () {
        this.counter++;
        console.log("++");
      },
      sub: function () {
        this.counter--;
        console.log("--");
      }
    }
  })
  setTimeout(function () {
    var app1 = new Vue({
      el: "#app1",
      data: {
        message1: "消息1",
      },
    })
  }, 1000)
</script>
</html>